<template>
    <view class="habit-input-container">
        <!-- 标题栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <u-icon name="arrow-left" color="#333" size="20"></u-icon>
                <text>返回</text>
            </view>
            <text class="page-title">生活习惯记录</text>
            <view class="placeholder"></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 睡眠时间 -->
            <view class="input-group">
                <text class="input-label">睡眠时间</text>
                <view class="time-group">
                    <view class="time-picker">
                        <text>入睡时间</text>
                        <u-datetime-picker mode="time" v-model="habitData.sleepTime"></u-datetime-picker>
                    </view>
                    <view class="time-picker">
                        <text>起床时间</text>
                        <u-datetime-picker mode="time" v-model="habitData.wakeTime"></u-datetime-picker>
                    </view>
                </view>
                <view class="input-tips">
                    <text>建议睡眠时间：7-8小时</text>
                </view>
            </view>

            <!-- 饮食情况 -->
            <view class="input-group">
                <text class="input-label">饮食情况</text>
                <view class="checkbox-group">
                    <u-checkbox-group v-model="habitData.meals">
                        <u-checkbox label="早餐" name="breakfast"></u-checkbox>
                        <u-checkbox label="午餐" name="lunch"></u-checkbox>
                        <u-checkbox label="晚餐" name="dinner"></u-checkbox>
                        <u-checkbox label="加餐/夜宵" name="snack"></u-checkbox>
                    </u-checkbox-group>
                </view>
                <view class="diet-quality">
                    <text>饮食质量</text>
                    <u-rate v-model="habitData.dietQuality" count="5" active-color="#1cb0f6"></u-rate>
                    <text class="rate-desc">{{ dietQualityDesc }}</text>
                </view>
                <view class="input-tips">
                    <text>1分：高热量、高脂肪；5分：均衡、健康饮食</text>
                </view>
            </view>

            <!-- 水分摄入 -->
            <view class="input-group">
                <text class="input-label">饮水量 (杯)</text>
                <u-number-box v-model="habitData.waterIntake" min="0" max="15"></u-number-box>
                <view class="input-tips">
                    <text>建议每天饮水8杯 (约2000ml)</text>
                </view>
            </view>

            <!-- 情绪状态 -->
            <view class="input-group">
                <text class="input-label">情绪状态</text>
                <view class="mood-selector">
                    <view v-for="(mood, index) in moods" :key="index" class="mood-item"
                        :class="{ active: habitData.mood === mood.value }" @click="habitData.mood = mood.value">
                        <text class="mood-emoji">{{ mood.emoji }}</text>
                        <text class="mood-name">{{ mood.name }}</text>
                    </view>
                </view>
            </view>

            <!-- 有害习惯 -->
            <view class="input-group">
                <text class="input-label">有害习惯</text>
                <view class="bad-habits">
                    <u-checkbox-group v-model="habitData.badHabits">
                        <u-checkbox label="抽烟" name="smoking"></u-checkbox>
                        <u-checkbox label="饮酒" name="alcohol"></u-checkbox>
                        <u-checkbox label="熬夜" name="stayUpLate"></u-checkbox>
                        <u-checkbox label="久坐不动" name="sedentary"></u-checkbox>
                    </u-checkbox-group>
                </view>
            </view>

            <!-- 日期选择 -->
            <view class="input-group">
                <text class="input-label">记录日期</text>
                <u-datetime-picker v-model="habitData.recordDate" mode="date"></u-datetime-picker>
            </view>

            <!-- 备注 -->
            <view class="input-group">
                <text class="input-label">备注</text>
                <u-textarea v-model="habitData.notes" placeholder="填写其他相关情况" count maxlength="200"></u-textarea>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button type="primary" text="保存记录" :customStyle="{ backgroundColor: '#1cb0f6' }"
                @click="saveRecord"></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            habitData: {
                sleepTime: '23:00', // 入睡时间
                wakeTime: '07:00', // 起床时间
                meals: ['breakfast', 'lunch', 'dinner'], // 默认三餐
                dietQuality: 3, // 饮食质量
                waterIntake: 5, // 饮水量
                mood: 'good', // 默认情绪
                badHabits: [], // 有害习惯
                recordDate: new Date().toISOString(), // 记录日期
                notes: '' // 备注
            },
            moods: [
                { value: 'excellent', name: '很棒', emoji: '😄' },
                { value: 'good', name: '不错', emoji: '🙂' },
                { value: 'neutral', name: '一般', emoji: '😐' },
                { value: 'bad', name: '不好', emoji: '😔' },
                { value: 'terrible', name: '糟糕', emoji: '😞' }
            ]
        }
    },
    computed: {
        dietQualityDesc() {
            const descriptions = ['极差', '较差', '一般', '良好', '优秀'];
            return descriptions[this.habitData.dietQuality - 1] || '';
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        // 保存记录
        saveRecord() {
            // 处理数据保存
            console.log('保存生活习惯数据:', this.habitData)

            // TODO: 调用API保存数据

            // 显示成功提示
            uni.showToast({
                title: '记录保存成功',
                icon: 'success',
                success: () => {
                    // 延迟返回
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                }
            })
        }
    }
}
</script>

<style lang="scss">
$duolingo-blue: #1cb0f6;

.habit-input-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;

    text {
        margin-left: 6rpx;
    }
}

.page-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.placeholder {
    width: 80rpx;
}

.form-container {
    flex: 1;
    padding: 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
    font-weight: bold;
}

.input-tips {
    margin-top: 10rpx;

    text {
        font-size: 24rpx;
        color: #999;
    }
}

.time-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
}

.time-picker {
    flex: 1;

    text {
        font-size: 26rpx;
        margin-bottom: 6rpx;
        display: block;
        color: #666;
    }
}

.checkbox-group,
.bad-habits {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx 0;
}

.diet-quality {
    margin-top: 20rpx;
    display: flex;
    align-items: center;

    text {
        margin-right: 16rpx;
        font-size: 26rpx;
        color: #666;
    }

    .rate-desc {
        margin-left: 16rpx;
        color: #1cb0f6;
    }
}

.mood-selector {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.mood-item {
    width: 120rpx;
    height: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12rpx;
    margin: 10rpx 0;
    transition: all 0.2s;
    border: 2rpx solid #eee;

    &.active {
        background-color: rgba($duolingo-blue, 0.1);
        border-color: $duolingo-blue;
    }

    .mood-emoji {
        font-size: 40rpx;
        margin-bottom: 6rpx;
    }

    .mood-name {
        font-size: 24rpx;
        color: #666;
    }
}

.submit-section {
    padding: 30rpx;
    margin-bottom: 30rpx;
}
</style>